<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg基础</title>
</head>
<body>
   <!--jpg,png,bmp等图片格式属于位图，通过描述每一个像素点的颜色来
		表达一张图片，这种图片在进行放大时，会变得模糊（每一个像素点
		都变大了）-->
		<!--<img src="ff.jpg"/>-->
		
		<!--svg图片属于矢量图，通过描述图片的绘制方式来表达一张图片，所以
		在放大时，不会产生模糊效果。svg只适合于图片内容单一，轮廓清晰
		的图片，不适合用于照片或绘画图片-->
   <!--xmlns是svg独有的命名空间，跟HTML不一样-->
    <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> 
        <!--矩形-->
        <!--x、y表示起点的坐标，矩形从起点绘制，宽高设置矩形的大小
        fill颜色填充，stroke边框颜色 stroke-width边框宽度-->
        <rect x="10" y="10" width="100" height="100" fill="red" stroke="orange" stroke-width="5"></rect>
        <!--圆形-->
        <!--cx表示圆心距离左边的坐标值，cy表示圆心距离上边的坐标值
        r表示半径-->
        <circle cx="50" cy="50" r="50" fill="yellow"></circle>
        <!--椭圆 rx、ry表示椭圆的长半轴跟短半轴，若只写一个值，另外一个值与其相等-->
        <ellipse cx="100" cy="100" rx="70" ry="50" fill="blue"></ellipse>
        <!--直线 两点成线-->
        <line x1="50" y1="30" x2="100" y2="150" stroke="#000"></line>
        <!--折线 多点成折线-->
        <!--points="x1 y1 x2 y2 x3 y3 x4 y4"-->
        <polyline points="50 30 100 250 300 350" stroke="green" fill="none"></polyline>
        <!--多边形 多边形也是多个点进行绘制的，注意绘制顺序-->
        <polygon points="100 100 150 100 125 200" fill="yellow"></polygon>
        <polygon points="100 100 300 100 130 240 200 30 260 240" stroke="purple" stroke-width="5" fill="none"></polygon>
        
        <!--曲线 M是起点，Q是二次贝塞尔曲线-->
        <path d="M 200,200 Q 300,250 400,200" stroke="black" stroke-width="10" fill="none"></path>
</body>
</html>